<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .imgContainer {
        width: 600px;
        height: 600px;
        background-color: pink;
        /* background-image: url(); */
      }
    </style>
  </head>
  <body>
    <div class="imgContainer"></div>
    <button>按钮</button>
    <script>
      var imgArr = [
        "https://tse1-mm.cn.bing.net/th/id/R-C.83253bf5007cd3cf05c315a8f3d0820b?rik=SDH41OT6GjdmlQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170215%2ff2d0a76c4d45e7255022f3c511e8bd7a.jpg&ehk=St4XCEEUbOi7HWL7L77WZEyZp096qDgXF070s0sw3Lg%3d&risl=&pid=ImgRaw&r=0",
        "https://pic1.zhimg.com/v2-d58ce10bf4e01f5086c604a9cfed29f3_r.jpg?source=1940ef5c",
        "https://tse1-mm.cn.bing.net/th/id/R-C.dab436e6a9d23101d719c1f3dd1a76a4?rik=ecsSPgiqEPBeNQ&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f201115%2f1-2011151G454.jpg&ehk=61OG%2bh8posKeFHHqLOOPJLQh6brnOHElxrxY9xRbGY4%3d&risl=&pid=ImgRaw&r=0",
      ];
      //   imgArr.style.= "400px";
      //   imgArr.style.height = "400px";

      var btn = document.querySelector("button");
      var imgContainerEle = document.querySelector(".imgContainer");
      var chiosekey = -1;
      btn.onclick = function () {
        var key = randomNum(0, imgArr.length - 1);
        while (chiosekey == key) {
          key = randomNum(0, imgArr.length - 1);
        }
        chiosekey = key;
        console.log(key);
        imgContainerEle.style.backgroundImage = `url(${imgArr[key]})`;
      };
      function randomNum(min, max) {
        return parseInt(Math.random() * (max + 1 - min)) + min;
      }
    </script>
  </body>
</html>
